<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>换肤</title>
</head>
<style>
    * {
        padding: 0;
        margin: 0;
    }

    html,
    body {
        height: 100%;
        position: relative;
    }

    ul,
    li {
        list-style: none;
    }

    .box {
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        height:100px;
        background: #58bc58;
        position: absolute;
        bottom: 100px;
        /* 超出隐藏 */
        /* border-radius: 50%; */
    }

    .box1 {
        height: 240px
    }

    .box li {
        width: 200px;
      
    }

    .box li img {
        width: 100%;
        height: 200px;
      
    }
    .btn{
        width: 60px;
        height: 60px;
        margin: 0 50%;
        background: pink;
        border: solid #58bc58;
        border-radius: 50%;
    }
</style>

<body>
    <ul class="box" style="background:#ddd no-repgeat center center">
        <li><img src="img/1.jpg" alt=""></li>
        <li><img src="img/2.jpg" alt=""></li>
        <li><img src="img/3.jpg" alt=""></li>
    </ul>
    <button class="btn">换肤</button>

    <script>
        /*
            1.点击换肤的时候，显示图片的容器（改变高度）
                高度为0   隐藏
                高度为240 显示 .box{height：240px}
                当盒子没有box1的时候那么久给元素添加box1名，如果有box就移出box1
            2.点击图片的时候，把图片的路径给到 body

         */
        // 获取元素
        let btn = document.querySelector('.btn');
        let box = document.querySelector('.box');
        var flag = false;
        btn.onclick = function () {
            // 绑定点击事件
            box.classList.toggle('box1');
        }
        box.onclick = function (e) {
            // 绑定图片点击事件
            document.body.style.background = 'url(' + e.target.src + ') no-repeat center center / 100% 100%';
            box.classList.toggle('box1')
        }
    </script>

</body>

</html>